@model WalkingTec.Mvvm.Doc.ViewModels.StudentVms.StudentVm

<wt:fieldset field-set-style="Simple" title="Combobox">
 </wt:fieldset>
   <p>Combobox的常用属性有：</p>
        <table lay-filter="parse-table-demo">
            <thead>
                <tr>
                    <th lay-data="{field:'username', width:200}">属性</th>
                    <th lay-data="{field:'required', width:60}">必填</th>
                    <th lay-data="{field:'joinTime', width:600}">描述</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Id</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>控件Id，默认根据绑定字段名称生成</td>
                </tr>
                <tr>
                    <td>Field</td>
                    <td><i class="layui-icon layui-icon-ok"></i></td>
                    <td>绑定字段</td>
                </tr>
                <tr>
                    <td>Disabled</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>是否禁用</td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>控件Name，默认根据绑定字段名称生成</td>
                </tr>
                <tr>
                    <td>LabelText</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>标签内容</td>
                </tr>
                <tr>
                    <td>LabelWidth</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>标签的长度，默认为80</td>
                </tr>
                <tr>
                    <td>HideLabel</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>是否隐藏标签</td>
                </tr>
                <tr>
                    <td>EmptyText</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>无数据时显示的提示文本</td>
                </tr>
                <tr>
                    <td>YesText</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>当绑定字段为布尔类型是，对应true显示的文本，默认为‘是’</td>
                </tr>
                <tr>
                    <td>NoText</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>当绑定字段为布尔类型是，对应false显示的文本，默认为‘否’</td>
                </tr>
                <tr>
                    <td>Items</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>列表数据源，当绑定字段为布尔或枚举时，框架会自动反射下拉列表，不需要填</td>
                </tr>
                <tr>
                    <td>MultiSelect</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>是否开启多选</td>
                </tr>
                <tr>
                    <td>EnableSearch</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>开启本地搜索，搜索不能和多选共同使用</td>
                </tr>
                <tr>
                    <td>ChangeFunc</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>选择改变后触发的js</td>
                </tr>
                <tr>
                    <td>LinkField</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>联动模式，指定需要联动的另一个ComboBox所绑定的字段</td>
                </tr>
                <tr>
                    <td>TriggerUrl</td>
                    <td><i class="layui-icon layui-icon-close"></i></td>
                    <td>联动模式，指定改变选择后调用的url，该url接收一个名为id的参数，并返回text，value数组格式的json</td>
                </tr>
            </tbody>
        </table>
    <wt:quote>
        <p>
            Combobox 支持直接绑定枚举，布尔字段，也支持通过 Items 属性设置数据源，Items需要绑定一个List<ComboSelectListItem>,
            ComboSelectListItem 是框架提供的辅助类，有 Text，Value，Selected 和 Disabled 4个属性，
            其中 Disabled 目前是专门为 Transfer 组件新增的属性，用于禁用某些特定 Item 的修改。
        </p>
        <ul class="doc">
            <li>当绑定枚举字段时，框架自动反射枚举，根据每个枚举值的 Display 属性作为 Text，枚举值本身作为 Value 来生成下拉菜单</li>
            <li>当绑定布尔字段时，框架根据 YesTex 和 NoText 的值作为 Text，布尔值作为 Value 来生成下拉菜单，默认 true 显示‘是’，false显示‘否’</li>
            <li>当指定了 Items 数据源时，框架使用 ComboSelectListItem 中的 Text 属性作为 Text，Value 属性作为 Value 来生成下拉菜单</li>
            <li>Items 数据源也可以指定为其他类型的List，这种情况下框架会为 List 中的每一项调用 ToString 作为下拉菜单的 Text 和 Value</li>
        </ul>
    </wt:quote>
        <wt:tab>
            <wt:tabheaders>
                <wt:tabheader title="效果" />
                <wt:tabheader title="代码" />
            </wt:tabheaders>
            <wt:tabcontents>
                <wt:tabcontent>
                    <wt:form vm="@Model" style="max-width:600px;">
                        <wt:combobox field="Entity.Sex" />
                        <wt:combobox field="Entity.IsValid" />
                        <wt:combobox field="Entity.IsValid" yes-text="真的是" no-text="真不是" />
                        <wt:combobox field="SelectedSchool" label-text="学校" items="AllSchools" />
                        <wt:combobox field="SelectedSchool2" label-text="学校搜索" items="AllSchools" enable-search="true"/>
                        <wt:combobox field="SelectedSchools" label-text="学校多选" items="AllSchools" multi-select="true" />
                        <wt:row align="AlignEnum.Right">
                            <wt:submitbutton disabled="true" />
                            <wt:closebutton disabled="true" />
                        </wt:row>
                    </wt:form>
                </wt:tabcontent>
                <wt:tabcontent>
                    <wt:code>
&ltwt:form vm="@@Model" width="600"&gt
    &ltwt:combobox field="Entity.Sex" /&gt
    &ltwt:combobox field="Entity.IsValid" /&gt
    &ltwt:combobox field="Entity.IsValid" yes-text="真的是" no-text="真不是" /&gt
    &ltwt:combobox field="SelectedSchool" label-text="学校" items="AllSchools" /&gt
    &ltwt:combobox field="SelectedSchool2" label-text="学校搜索" items="AllSchools" enable-search="true"/&gt
    &ltwt:combobox field="SelectedSchools" label-text="学校多选" items="AllSchools" multi-select="true" /&gt
    &ltwt:row align="AlignEnum.Right"&gt
        &ltwt:submitbutton disabled="true" /&gt
        &ltwt:closebutton disabled="true" /&gt
    &lt/wt:row&gt
&lt/wt:form&gt

                    </wt:code>
                </wt:tabcontent>
            </wt:tabcontents>
        </wt:tab>

<wt:fieldset field-set-style="Simple" title="联动">
    <wt:quote>
        <p>ComboBox可以开启联动功能，方法是设置LinkedField和TriggerUrl</p>
        <p>LinkField指向vm中的某个字段，框架会寻找是否有其他Combobox,CheckBox,Radio,Tree控件绑定了这个字段，并把找到的控件作为联动的目标</p>
        <p>TriggerUrl接受一个名为id的参数，返回Text,Value数组形式的json，如果联动的是Tree控件，则需要返会TreeSelectListItem格式的json</p>
        <p>框架提供了GetSelectListItems，以及GetTreeSelectListItems函数，可以方便的从数据库读取数据并生成两种格式的数据</p>
    </wt:quote>
    <wt:tab>
        <wt:tabheaders>
            <wt:tabheader title="效果" />
            <wt:tabheader title="代码" />
        </wt:tabheaders>
        <wt:tabcontents>
            <wt:tabcontent>
                <wt:form vm="@Model" style="max-width:600px;">
                    <wt:combobox field="SelectedSchool3" label-text="学校" items="AllSchools" link-field="SelectedMajor" trigger-url="/UI/GetMajorBySchool"/>
                    <wt:combobox field="SelectedMajor" label-text="专业" link-field="SelectedStudent" trigger-url="/UI/GetStudentByMajor"/>
                     <wt:combobox field="SelectedStudent" label-text="学生"/>
                   <wt:row align="AlignEnum.Right">
                        <wt:submitbutton disabled="true" />
                        <wt:closebutton disabled="true" />
                    </wt:row>
                </wt:form>
            </wt:tabcontent>
            <wt:tabcontent>
                <wt:code>
&ltwt:form vm="@@Model" width="600"&gt
    &ltwt:combobox field="SelectedSchool3" label-text="学校" items="AllSchools" link-field="SelectedMajor" trigger-url="/UI/GetMajorBySchool"/&gt
    &ltwt:combobox field="SelectedMajor" label-text="专业" link-field="SelectedStudent" trigger-url="/UI/GetStudentByMajor"/&gt
    &ltwt:combobox field="SelectedStudent" label-text="学生" /&gt
    &ltwt:row align="AlignEnum.Right"&gt
        &ltwt:submitbutton disabled="true" /&gt
        &ltwt:closebutton disabled="true" /&gt
    &lt/wt:row&gt
&lt/wt:form&gt
                </wt:code>
                <wt:code title="/UI/GetMajorBySchool">
public IActionResult GetMajorBySchool(string id)
{
    List&ltSchool&gt schools = new List&ltSchool&gt()
    {
        new School { SchoolName = "清华大学", Majors = new List&ltMajor&gt(){
            new Major{ MajorName = "物理系"},
            new Major{ MajorName = "数学系"},
        } },
        new School { SchoolName = "北京大学", Majors = new List&ltMajor&gt(){
            new Major{ MajorName = "文学系"},
            new Major{ MajorName = "历史系"},
        }},
        new School { SchoolName = "复旦大学", Majors = new List&ltMajor&gt(){
            new Major{ MajorName = "生物系"},
            new Major{ MajorName = "化学系"},
        }},
        new School { SchoolName = "北京工业大学", Majors = new List&ltMajor&gt(){
            new Major{ MajorName = "工业控制"},
            new Major{ MajorName = "计算机软件"},
        }},
        new School { SchoolName = "浙江大学", Majors = new List&ltMajor&gt(){
            new Major{ MajorName = "人文系"},
            new Major{ MajorName = "经济系"},
        }},
    };

    var rv = schools.Where(x =&gt x.SchoolName == id).SelectMany(x=&gtx.Majors).Select(x =&gt new { Text = x.MajorName, Value = x.ID }).ToList();
    return Json(rv);
}

  public IActionResult GetStudentByMajor(string id)
  {
      //生成专业名+学生1，2，3这种模拟数据返回到前台
      List&lt;ComboSelectListItem&gt; rv = new List&lt;ComboSelectListItem&gt;();
      for(int i = 1; i &lt;= 5; i++)
      {
          rv.Add(new ComboSelectListItem
          {
              Text = id + "学生" + i
          }); ;
      }
      return Json(rv);
  }

                </wt:code>
            </wt:tabcontent>
        </wt:tabcontents>
    </wt:tab>

</wt:fieldset>
    <script>
    layui.use('code',function(){layui.code({ about: false })})
        layui.table.init('parse-table-demo', {
        limit: 100, page: false
        });
    </script>
<script>
  $("#@Model.ViewDivId").parent().css("height", "auto");
</script>
